<template>
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">编辑分类</strong> /
                <small>Edit Category</small>
            </div>
        </div>


        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-12">

                <form class="am-form">


                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            分类名称
                        </div>
                        <div class="am-u-sm-8 am-u-md-4">
                            <input type="text" class="am-input-sm" v-model="category.name">
                        </div>
                        <div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            缩略图
                        </div>

                        <div class="am-u-sm-8 am-u-md-8 am-u-end col-end">
                            <div class="am-form-group am-form-file new_thumb">
                                <button type="button" class="am-btn am-btn-secondary am-btn-sm">
                                    <i class="am-icon-cloud-upload" id="loading"></i> 上传新的缩略图
                                </button>
                                <input type="file" id="thumb_upload">
                            </div>

                            <div class="select_thumb">
                                <button type="button" class="am-btn am-btn-success am-btn-sm" @click="ckUpload">
                                    <i class="am-icon-search-plus"></i> 选择已存在的缩略图
                                </button>
                            </div>

                            <hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>

                            <div>
                                <img :src="category.thumb" style="max-height: 200px;">
                            </div>
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            描述信息
                        </div>
                        <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                            <textarea rows="4" v-model="category.desc"></textarea>
                        </div>
                    </div>

                    <div class="am-g am-margin-top sort">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            排序
                        </div>
                        <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                            <input type="text" v-model="category.sort_order" class="am-input-sm">
                        </div>
                    </div>


                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            显示在导航栏
                        </div>
                        <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                            <label class="am-radio-inline">
                                <input type="radio" value="1" v-model="category.is_show"> 是
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" value="0" v-model="category.is_show"> 否
                            </label>
                        </div>
                    </div>


                    <div class="am-g am-margin-top-sm">
                        <div class="am-u-sm-12 am-u-md-2 am-text-right admin-form-text">
                            栏目内容
                        </div>
                    </div>

                    <div class="am-g am-margin-top-sm">
                        <div class="am-u-sm-12 am-u-md-12">
                            <div id="markdown">
                                <textarea rows="10" name="content" style="display:none;"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="am-margin">
                        <button @click.prevent="onSubmit" class="am-btn am-btn-primary am-radius">提交保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


</template>


<style>

</style>
<script>

    export default{
        ready(){
            this.$dispatch('upload', this)

            var id = this.$route.params.categoryId;
            this.resource.get({id: id}).then((response) => {
                this.$set('category', response.json())
            });
        },
        data(){
            return {
                resource: this.$parent.categoryResource,
                category: {}
            }
        },
        methods: {
            onSubmit: function () {
                this.resource.update({id: this.category.id}, this.category).then((response) => {
                    this.$router.go({name: 'category'})
                });
            },
            ckUpload: function () {
                this.$dispatch('ckUpload', this)
            }
        }
    }
</script>
